<script lang="ts" setup>
import { UiDataView } from '../../utils'
import { onMounted, ref } from 'vue'
import { ElTag } from 'element-plus'
import { DataViewRef, PageFetchAction, TableColumnConfig } from '../../utils/types'

const tableRef: DataViewRef = ref()

const columns = [
  { label: '请求URL' },
  {
    label: '方法',
    prop: 'method',
    render: (h, { row }) => {
      const type = ({
        get: 'primary',
        post: 'success'
      })[row.method.toLowerCase()]

      return h(ElTag, { type }, {
        default: () => row.method
      })
    }
  },
  { label: '用户ID', prop: 'userId' },
  { label: '用户名称', prop: 'username' },
  { label: '操作描述', prop: 'desc' },
  { label: '操作时间', prop: 'operateTime', minWidth: 170 },
  { label: 'IP', prop: 'ip' }
] as TableColumnConfig<any>[]

const fetchAction: PageFetchAction = params => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        total: 2,
        data: [{ username: 'test', method: 'GET' }, { method: 'POST', ip: '168.12.3.4', operateTime: '2024-02-20 12:33:22' }]
      })
    }, 500)
  })
}

onMounted(() => {
  tableRef.value.getData()
})
</script>

<template>
  <UiDataView ref="tableRef" :columns="columns" :fetch-action="fetchAction">
    <template #search="{ form, onSearch }">
      <ElFormItem label="应用ID">
        <ElInput v-model="form.appId" @keyup.enter="onSearch" />
      </ElFormItem>
      <ElFormItem label="日志库">
        <ElSelect clearable></ElSelect>
      </ElFormItem>
      <ElFormItem label="时间选择">
        <ElDatePicker
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          range-separator="至"
          v-model="form.timerange" />
      </ElFormItem>
      <ElFormItem label="请求URL">
        <ElInput />
      </ElFormItem>
      <ElFormItem label="用户">
        <ElSelect></ElSelect>
      </ElFormItem>
    </template>
  </UiDataView>
</template>
